<template>
  <el-card style="box-shadow: none;">
    <div class="container" >
      <div class="row row--top-40" style="display: flex; align-items: center;">
        <div class="col-md-12" style="display: flex; align-items: center;">
          <svg t="1707295744799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="1302" width="30" height="30"><path d="M481.28 204.8c158.35136 0 286.72 128.36864 286.72 286.72 0 70.7584-25.64096 135.53664-68.11648 185.5488l123.12576 123.2896a15.36 15.36 0 1 1-21.72928 21.7088l-122.51136-122.6752A285.73696 285.73696 0 0 1 481.28 778.24c-158.35136 0-286.72-128.36864-286.72-286.72s128.36864-286.72 286.72-286.72z m0 30.72C339.88608 235.52 225.28 350.12608 225.28 491.52s114.60608 256 256 256S737.28 632.91392 737.28 491.52s-114.60608-256-256-256z" fill="#062C3D" p-id="1303"></path><path d="M356.47488 507.4944c12.98432 32.0512 32.78848 57.9584 59.63776 78.1312 27.32032 20.52096 60.53888 34.93888 99.86048 43.17184l-8.3968 40.09984c-44.99456-9.4208-83.7632-26.25536-116.08064-50.52416-32.80896-24.65792-57.22112-56.58624-72.97024-95.49824l37.94944-15.36z" fill="#76cb02" p-id="1304" data-spm-anchor-id="a313x.collections_detail.0.i0.33973a817vAg9o" class="selected"></path></svg>
          <h2 class="row__title" style="margin-left: 10px; justify-content: flex-start;">筛选搜索</h2>
        </div>
      </div>
      <el-form @submit.prevent ref="inputForm" :inline="true" :model="inputForm" class="demo-form-inline" style="margin-left: 20px" >
        <el-row>
          <el-form-item>
            <div class="form-control">
              <input type="text" required v-model="inputForm.couponsName" @keyup.enter="searchDataList"/>
              <label>
                <span style="transition-delay:0ms">输</span><span style="transition-delay:50ms">入</span><span style="transition-delay:100ms">优</span><span style="transition-delay:150ms">惠</span><span style="transition-delay:200ms">券</span><span style="transition-delay:250ms">名</span>
              </label>
            </div >
          </el-form-item>
          <el-form-item>
            <div class="form-control">
              <input type="text" required v-model="inputForm.companyName" @keyup.enter="searchDataList"/>
              <label>
                <span style="transition-delay:0ms">输</span><span style="transition-delay:50ms">入</span><span style="transition-delay:100ms">广</span><span style="transition-delay:150ms">告</span><span style="transition-delay:200ms">主</span><span style="transition-delay:250ms">公</span><span style="transition-delay:300ms">司</span>
              </label>
            </div >
          </el-form-item>
          <ul class="form-control" style="margin-left: -45px;margin-top: 20px">
            <li class="icon-content" >
              <form>
                <button
                    class="link"
                    data-social="inputDate"
                    type="button"
                    @click="searchDataList"
                >
                  <svg t="1707225141071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                       p-id="1299" width="200" height="200">
                    <path d="M902.174374 942.511058c6.66684 6.66684 15.400758 9.999748 24.133653 9.999748s17.466814-3.332908 24.13263-9.999748c13.33368-13.332656 13.33368-34.932604 0-48.266283L816.820404 760.610194c79.380932-79.128175 124.171044-186.079022 124.171044-299.366182 0-233.349629-189.833533-423.183162-423.183162-423.183162-233.333256 0-423.166789 189.834556-423.166789 423.184185s189.833533 423.183162 423.166789 423.183162c35.750225 0 72.399937-4.933359 108.932991-14.650675 18.23327-4.849448 29.067013-23.532973 24.216541-41.74987-4.833075-18.216897-23.532973-29.049616-41.74987-24.216541-30.815843 8.200776-61.566194 12.350283-91.399663 12.350283-195.700147 0-354.899986-159.216211-354.899986-354.916359s159.199839-354.916359 354.899986-354.916359 354.916359 159.216211 354.916359 354.916359c0 106.899682-47.566342 207.082382-130.516566 274.866185-14.59951 11.932774-16.766872 33.432437-4.833075 48.03297"
                          fill="currentColor" p-id="1300"></path>
                  </svg>
                </button>
              </form>
            </li>
          </ul>
        </el-row>
      </el-form>
    </div>
  </el-card>
  <el-card style="box-shadow: none;margin-top: 20px" >
    <div class="container" >
      <div class="row row--top-40" style="display: flex; align-items: center;">
        <div class="col-md-12" style="display: flex; align-items: center;">
          <svg t="1708411655166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16046" id="mx_n_1708411655166" data-spm-anchor-id="a313x.search_index.0.i10.129b3a81vaR55s"
               width="26" height="26"><path d="M764.945067 915.933867H259.054933a95.675733 95.675733 0 0 1-95.573333-95.573334v-590.165333a95.675733 95.675733 0 0 1 95.573333-95.573333H334.506667a27.306667 27.306667 0 0 1 0 54.613333h-75.451734a40.96 40.96 0 0 0-40.96 40.96v590.165333a40.96 40.96 0 0 0 40.96 40.96h505.890134a40.96 40.96 0 0 0 40.96-40.96v-590.165333a40.96 40.96 0 0 0-40.96-40.96h-75.3664a27.306667 27.306667 0 0 1 0-54.613333h75.3664a95.675733 95.675733 0 0 1 95.573333 95.573333v590.165333a95.675733 95.675733 0 0 1-95.573333 95.573334z" fill="#464545" p-id="16047" data-spm-anchor-id="a313x.search_index.0.i9.129b3a81vaR55s" class="selected"></path><path d="M281.992533 404.258133a23.978667 23.978667 0 0 1-2.696533-0.136533c-0.8704 0-1.706667-0.221867-2.645333-0.392533s-1.706667-0.392533-2.594134-0.648534-1.706667-0.5632-2.5088-0.904533-1.706667-0.733867-2.423466-1.143467-1.553067-0.887467-2.286934-1.365333-1.467733-1.041067-2.167466-1.604267-1.348267-1.160533-1.979734-1.792a27.477333 27.477333 0 0 1-8.004266-19.3024 23.586133 23.586133 0 0 1 0.136533-2.696533c0.085333-0.887467 0.221867-1.706667 0.392533-2.645333a23.1424 23.1424 0 0 1 0.6656-2.594134c0.256-0.853333 0.5632-1.706667 0.887467-2.525866s0.733867-1.621333 1.143467-2.4064 0.887467-1.553067 1.3824-2.304 1.024-1.467733 1.5872-2.1504a25.122133 25.122133 0 0 1 1.809066-1.9968c0.631467-0.631467 1.297067-1.2288 1.979734-1.809067s1.416533-1.092267 2.167466-1.5872a23.773867 23.773867 0 0 1 2.286934-1.365333 26.112 26.112 0 0 1 2.423466-1.143467c0.8192-0.341333 1.706667-0.648533 2.5088-0.904533s1.706667-0.477867 2.594134-0.648534a23.552 23.552 0 0 1 2.645333-0.392533 25.736533 25.736533 0 0 1 5.376 0 22.9888 22.9888 0 0 1 2.645333 0.392533 27.0848 27.0848 0 0 1 5.12 1.553067 29.252267 29.252267 0 0 1 4.7104 2.5088 24.951467 24.951467 0 0 1 2.1504 1.5872c0.699733 0.580267 1.365333 1.1776 1.9968 1.809067a25.122133 25.122133 0 0 1 1.809067 1.9968c0.5632 0.682667 1.092267 1.416533 1.5872 2.1504a26.350933 26.350933 0 0 1 1.365333 2.304 25.8048 25.8048 0 0 1 1.143467 2.4064 28.78464 28.78464 0 0 1 1.570133 5.12c0.187733 0.887467 0.3072 1.706667 0.392534 2.645333s0.136533 1.706667 0.136533 2.696533 0 1.792-0.136533 2.679467-0.221867 1.706667-0.392534 2.645333-0.4096 1.706667-0.6656 2.594134A25.821867 25.821867 0 0 1 307.2 387.413333a26.112 26.112 0 0 1-1.143467 2.423467 23.773867 23.773867 0 0 1-1.365333 2.286933 25.224533 25.224533 0 0 1-1.5872 2.167467c-0.5632 0.682667-1.1776 1.365333-1.809067 1.9968a29.678933 29.678933 0 0 1-4.1472 3.413333c-0.733867 0.477867-1.518933 0.938667-2.304 1.365334s-1.5872 0.802133-2.4064 1.143466-1.706667 0.631467-2.525866 0.904534a26.197333 26.197333 0 0 1-2.594134 0.648533c-0.8704 0.170667-1.706667 0.3072-2.645333 0.392533a23.483733 23.483733 0 0 1-2.679467 0.1024zM281.992533 568.32a27.5456 27.5456 0 0 1-19.3024-7.9872c-0.631467-0.631467-1.245867-1.314133-1.809066-1.9968s-1.092267-1.416533-1.5872-2.167467-0.955733-1.501867-1.3824-2.286933a29.986133 29.986133 0 0 1-2.030934-4.932267c-0.273067-0.853333-0.477867-1.706667-0.6656-2.594133s-0.3072-1.706667-0.392533-2.645333-0.136533-1.792-0.136533-2.696534 0-1.792 0.136533-2.679466 0.221867-1.706667 0.392533-2.645334 0.392533-1.706667 0.6656-2.594133a26.146133 26.146133 0 0 1 0.904534-2.525867 25.6 25.6 0 0 1 1.1264-2.4064 27.921067 27.921067 0 0 1 2.9696-4.4544 25.122133 25.122133 0 0 1 1.809066-1.9968 27.306667 27.306667 0 0 1 38.6048 0 25.122133 25.122133 0 0 1 1.809067 1.9968c0.5632 0.682667 1.092267 1.416533 1.5872 2.1504a24.046933 24.046933 0 0 1 1.365333 2.304 25.8048 25.8048 0 0 1 1.143467 2.4064 26.146133 26.146133 0 0 1 0.904533 2.525867c0.256 0.853333 0.477867 1.706667 0.6656 2.594133s0.3072 1.706667 0.392534 2.645334 0.136533 1.792 0.136533 2.679466 0 1.706667-0.136533 2.696534-0.221867 1.706667-0.392534 2.645333-0.4096 1.706667-0.6656 2.594133a25.821867 25.821867 0 0 1-0.904533 2.5088 26.112 26.112 0 0 1-1.143467 2.423467 23.773867 23.773867 0 0 1-1.365333 2.286933c-0.494933 0.750933-1.024 1.467733-1.5872 2.167467s-1.1776 1.365333-1.809067 1.9968a27.5456 27.5456 0 0 1-19.3024 7.9872zM281.992533 732.279467c-0.887467 0-1.706667 0-2.696533-0.136534s-1.706667-0.221867-2.645333-0.392533-1.706667-0.4096-2.594134-0.6656-1.706667-0.5632-2.5088-0.904533a26.112 26.112 0 0 1-2.423466-1.143467 23.773867 23.773867 0 0 1-2.286934-1.365333c-0.750933-0.494933-1.467733-1.024-2.167466-1.5872s-1.348267-1.1776-1.979734-1.809067a25.122133 25.122133 0 0 1-1.809066-1.9968 27.921067 27.921067 0 0 1-4.113067-6.8608 26.043733 26.043733 0 0 1-0.887467-2.525867 21.947733 21.947733 0 0 1-0.6656-2.577066c-0.170667-0.887467-0.3072-1.706667-0.392533-2.6624a26.368 26.368 0 0 1 0-5.358934c0.085333-0.887467 0.221867-1.706667 0.392533-2.6624a23.1424 23.1424 0 0 1 0.6656-2.594133c0.256-0.836267 0.546133-1.706667 0.887467-2.5088s0.733867-1.706667 1.143467-2.423467 0.887467-1.553067 1.3824-2.286933 1.024-1.467733 1.5872-2.167467 1.1776-1.365333 1.809066-1.9968 1.297067-1.2288 1.979734-1.792 1.416533-1.109333 2.167466-1.604266 1.501867-0.938667 2.286934-1.365334 1.604267-0.802133 2.423466-1.143466 1.706667-0.631467 2.5088-0.887467 1.706667-0.477867 2.594134-0.6656 1.706667-0.3072 2.645333-0.392533a25.736533 25.736533 0 0 1 5.376 0c0.887467 0.085333 1.706667 0.221867 2.6624 0.392533a25.924267 25.924267 0 0 1 2.577067 0.6656c0.853333 0.256 1.706667 0.5632 2.525866 0.887467s1.706667 0.733867 2.423467 1.143466 1.553067 0.887467 2.286933 1.365334a29.678933 29.678933 0 0 1 4.1472 3.413333c0.631467 0.631467 1.245867 1.314133 1.809067 1.9968s1.092267 1.416533 1.5872 2.167467a23.773867 23.773867 0 0 1 1.365333 2.286933A26.112 26.112 0 0 1 307.2 694.613333c0.341333 0.8192 0.648533 1.706667 0.904533 2.5088s0.477867 1.706667 0.648534 2.594134a23.893333 23.893333 0 0 1 0.4096 2.6624c0 0.887467 0.136533 1.792 0.136533 2.679466s0 1.792-0.136533 2.679467a23.893333 23.893333 0 0 1-0.4096 2.6624 25.856 25.856 0 0 1-0.648534 2.577067 26.146133 26.146133 0 0 1-0.904533 2.525866 25.8048 25.8048 0 0 1-1.143467 2.4064 24.046933 24.046933 0 0 1-1.365333 2.304c-0.494933 0.733867-1.024 1.467733-1.5872 2.1504a26.965333 26.965333 0 0 1-5.956267 5.393067 23.773867 23.773867 0 0 1-2.286933 1.365333 27.665067 27.665067 0 0 1-4.949333 2.048c-0.836267 0.256-1.706667 0.477867-2.577067 0.6656s-1.706667 0.3072-2.6624 0.392534-1.792 0.0512-2.679467 0.0512zM604.7744 404.2752H361.813333a27.306667 27.306667 0 1 1 0-54.613333h242.961067a27.306667 27.306667 0 0 1 0 54.613333zM604.7744 568.32H361.813333a27.306667 27.306667 0 1 1 0-54.613333h242.961067a27.306667 27.306667 0 0 1 0 54.613333zM604.7744 732.279467H361.813333a27.306667 27.306667 0 0 1 0-54.613334h242.961067a27.306667 27.306667 0 0 1 0 54.613334zM750.062933 404.2752h-63.266133a27.306667 27.306667 0 1 1 0-54.613333h63.266133a27.306667 27.306667 0 0 1 0 54.613333zM750.062933 568.32h-63.266133a27.306667 27.306667 0 0 1 0-54.613333h63.266133a27.306667 27.306667 0 0 1 0 54.613333zM750.062933 732.279467h-63.266133a27.306667 27.306667 0 0 1 0-54.613334h63.266133a27.306667 27.306667 0 0 1 0 54.613334zM669.098667 242.6368H354.986667a47.786667 47.786667 0 0 1-47.786667-47.786667V149.026133a47.786667 47.786667 0 0 1 47.786667-47.786666h314.197333a47.786667 47.786667 0 0 1 47.786667 47.786666v45.824a47.786667 47.786667 0 0 1-47.872 47.786667z m-307.370667-54.613333h300.544V155.8528H361.813333z" fill="#76cb02" p-id="16048" data-spm-anchor-id="a313x.search_index.0.i11.129b3a81vaR55s" class=""></path></svg>
          <h2 class="row__title" style="margin-left: 10px; justify-content: flex-start;">数据列表</h2>
        </div>
      </div>
      <div class="row row--top-20">
        <!--新增、批量刪除按鈕-->
        <div>
          <!--   <el-button @click="addData">新增优惠券</el-button> -->
          <ul class="example-1">
            <div style="margin-bottom: -28px">
              <li class="icon-content" @click="addData">
                <a
                    class="link"
                    data-social="addData"
                >
                  <svg t="1707204592900" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                       p-id="1347" width="200" height="200">
                    <path d="M512 64q95.68 0 182.496 37.152t149.664 100 100 149.664 37.152 182.496-37.152 182.496-100 149.664-149.664 100-182.496 37.152-182.496-37.152-149.664-100-100-149.664-37.152-182.496 37.152-182.496 100-149.664 149.664-100 182.496-37.152zM512 149.344q-78.016 0-149.152 30.496t-122.496 81.824-81.824 122.496-30.496 149.152 30.496 149.152 81.824 122.496 122.496 81.824 149.152 30.496 149.152-30.496 122.496-81.824 81.824-122.496 30.496-149.152-30.496-149.152-81.824-122.496-122.496-81.824-149.152-30.496zM512 320q17.664 0 30.176 12.512t12.512 30.176l0 128 128 0q17.664 0 30.176 12.512t12.512 30.176-12.512 30.176-30.176 12.512l-128 0 0 128q0 17.664-12.512 30.176t-30.176 12.512-30.176-12.512-12.512-30.176l0-128-128 0q-17.664 0-30.176-12.512t-12.512-30.176 12.512-30.176 30.176-12.512l128 0 0-128q0-17.664 12.512-30.176t30.176-12.512z"
                          fill="currentColor" p-id="1348"></path></svg>
                </a>
                <div class="addTip">新增优惠券</div>
              </li>
            </div>
            <div style="margin-bottom: -28px">

              <li class="icon-content" @click="openWindow">
                <a
                    class="link"
                    data-social="delData"
                >
                  <svg t="1707204680847" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                       p-id="1568" width="200" height="200">
                    <path d="M512 64q95.68 0 182.496 37.152t149.664 100 100 149.664 37.152 182.496-37.152 182.496-100 149.664-149.664 100-182.496 37.152-182.496-37.152-149.664-100-100-149.664-37.152-182.496 37.152-182.496 100-149.664 149.664-100 182.496-37.152zM512 149.344q-78.016 0-149.152 30.496t-122.496 81.824-81.824 122.496-30.496 149.152 30.496 149.152 81.824 122.496 122.496 81.824 149.152 30.496 149.152-30.496 122.496-81.824 81.824-122.496 30.496-149.152-30.496-149.152-81.824-122.496-122.496-81.824-149.152-30.496zM341.344 490.656l341.344 0q17.664 0 30.176 12.512t12.512 30.176-12.512 30.176-30.176 12.512l-341.344 0q-17.664 0-30.176-12.512t-12.512-30.176 12.512-30.176 30.176-12.512z"
                          fill="currentColor" p-id="1569"></path></svg>
                </a>
                <div class="delTip">批量删除</div>
              </li>
            </div>
          </ul>
        </div>
        <!--表單-->
        <div class="col-md-12">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!--1.代金券表單-->
            <el-tab-pane label="代金券" name="1">
              <div class="table-container">
                <!-- 清空选项 -->
                <el-button type="text" @click="toggleSelection()" style="margin-top: 10px">
                  清空选项
                </el-button>
                <!-- 数据表单 -->
                <el-table :data="voucherList"
                          style="width: 100%;margin-top: 10px"
                          ref="multipleTable"
                          @selection-change="handleSelectionChange"
                          @header-contextmenu="cellClick">
                  <el-table-column type="selection" align="center" class="tui-checkbox "/>
                  <el-table-column fixed prop="couponsId" align="center" width="50px"/>
                  <el-table-column label="代金券名称" prop="couponsName" align="center" width="150px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.couponsName" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.couponsName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="是否启用" prop="stateValue" align="center" width="150px">
                    <template #default="scope">
                      <el-switch
                          v-model="scope.row.openState"
                          size="large"
                          inactive-color="#F56C6C"
                          inline-prompt
                          :disabled="scope.row.editState"
                          active-text="启用"
                          inactive-text="禁用"
                          @change="handleStatusChange(scope.$index, scope.row)">
                      </el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="广告主" prop="userName" align="center" width="180px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.userName" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.userName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="代替金额" prop="value" align="center" width="160px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.value" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.value}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="有效日期" prop="value" align="center" width="420px">
                    <template #default="scope">
                      <div class="block" v-show="scope.row.iseditor">
                        <el-date-picker
                            v-model="value1"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                      </div>
                      <span v-show="!scope.row.iseditor">{{scope.row.startDate}}  至 {{scope.row.endDate}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="代金券描述" prop="description" align="center" width="180">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.description" v-show="scope.row.iseditor" />
                      <el-popover
                          placement="top-start"
                          title="代金券描述"
                          trigger="hover"
                          :content="scope.row.description"
                      >
                        <template #reference>
                          <span v-show="!scope.row.iseditor">{{ scope.row.description.slice(0, 10) + '...' }}</span>
                        </template>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column label="使用条件" prop="condition" align="center" width="180px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.condition" v-show="scope.row.iseditor" />
                      <el-popover
                          placement="top-start"
                          title="使用条件"
                          width="200"
                          trigger="hover"
                          :content="scope.row.condition"
                      >
                        <template #reference >
                          <span v-show="!scope.row.iseditor">{{ scope.row.condition.slice(0, 10) + '...' }}</span>
                        </template>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" align="center" width="160px">
                    <template #default="scope">

                      <!--編輯徽章按鈕-->
                      <svg version="1.1" class="table-row__edit" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                           viewBox="0 0 512.001 512.001" style="margin-top: 5px"
                           xml:space="preserve" data-toggle="tooltip" data-placement="bottom" title="Edit"
                           v-if="scope.row.showEditor" @click="edit(scope.row)"><g>	<g>
                    <path d="M496.063,62.299l-46.396-46.4c-21.2-21.199-55.69-21.198-76.888,0l-18.16,18.161l123.284,123.294l18.16-18.161    C517.311,117.944,517.314,83.55,496.063,62.299z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>
		<path d="M22.012,376.747L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    l117.512-21.763L22.012,376.747z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>		<polygon points="333.407,55.274 38.198,350.506 161.482,473.799 456.691,178.568   " style="fill: rgb(1, 185, 209);"></polygon>	</g></g><g></g><g></g><g></g>
                        <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
                      <!--保存徽章按鈕-->
                      <svg t="1707127122109" class="table-row__edit" viewBox="0 0 1024 1024" version="1.1"
                           xmlns="http://www.w3.org/2000/svg" p-id="6090"
                           v-if="scope.row.isEditor" @click="saves(scope.row)">
                        <path d="M896 0l-896 0 0 1024 1024 0 0-896-128-128zM512 128l128 0 0 256-128 0 0-256zM896 896l-768 0 0-768 64 0 0 320 576 0 0-320 74.97728 0 53.02272 53.02272 0 714.97728z" fill="#01b9d1" p-id="6091"></path></svg>
                      <!--刪除徽章按鈕-->
                      <el-popconfirm
                          confirm-button-text="确定"
                          cancel-button-text="取消"
                          icon-color="#F56C6C"
                          title="确定要删除该优惠券吗?"
                          @confirm="deleteUser"
                      >
                        <template #reference>
                          <el-button type="text" @click="getDelData(scope.row)" v-if="!scope.row.isAdd">
                            <svg t="1708690915206" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                 p-id="6707" data-spm-anchor-id="a313x.search_index.0.i19.5b243a81J42vG4" width="20" height="20"><path d="M390.144 128h213.333333a21.333333 21.333333 0 1 0 0-42.666667h-213.333333a21.333333 21.333333 0 0 0 0 42.666667zM64 240.469333h871.466667a21.333333 21.333333 0 1 0 0-42.666666H64a21.333333 21.333333 0 0 0 0 42.666666z" fill="#707070" p-id="6708" data-spm-anchor-id="a313x.search_index.0.i20.5b243a81J42vG4" class="selected"></path><path d="M711.082667 964.693333H286.762667a106.666667 106.666667 0 0 1-106.666667-106.666666V219.136a21.333333 21.333333 0 0 1 21.333333-21.333333h594.986667a21.333333 21.333333 0 0 1 21.333333 21.333333V858.026667a106.666667 106.666667 0 0 1-106.666666 106.666666zM222.762667 240.469333V858.026667a64 64 0 0 0 64 64h424.32a64 64 0 0 0 64-64V240.469333H222.762667z" fill="#707070" p-id="6709" data-spm-anchor-id="a313x.search_index.0.i18.5b243a81J42vG4" class="selected"></path><path d="M336.64 395.264v344.533333a21.333333 21.333333 0 1 0 42.666667 0V395.264a21.333333 21.333333 0 0 0-42.666667 0zM620.202667 395.264v344.533333a21.333333 21.333333 0 1 0 42.666666 0V395.264a21.333333 21.333333 0 1 0-42.666666 0zM478.378667 395.264v344.533333a21.333333 21.333333 0 1 0 42.666666 0V395.264a21.333333 21.333333 0 1 0-42.666666 0z" fill="#01b9d1" p-id="6710" data-spm-anchor-id="a313x.search_index.0.i15.5b243a81J42vG4" class=""></path></svg>  </el-button>
                        </template>
                      </el-popconfirm>
                      <!--查看詳情按鈕-->
                      <el-button type="text" @click="checkData(scope.$index, scope.row)" :class="['custom-button']">
                        <svg t="1708696256461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             p-id="19713" data-spm-anchor-id="a313x.search_index.0.i43.5b243a81J42vG4" width="25" height="25"><path d="M900.3 521.728c-1.126-2.765-28.978-69.018-90.418-135.885-36.25-39.424-76.8-70.963-120.525-93.593-54.887-28.468-114.79-42.906-177.869-42.906-64.614 0-125.44 14.438-180.531 42.906-43.93 22.63-84.378 54.17-120.115 93.798-60.519 66.97-86.528 133.427-87.552 136.192l-3.38 8.806 4.506 8.295c1.331 2.457 32.87 59.801 96.051 117.657 37.171 34.1 77.824 61.236 120.627 80.692 53.76 24.473 111.104 36.966 170.496 36.966 58.573 0 115.508-12.39 169.268-36.966 42.7-19.456 83.456-46.695 120.934-80.692 63.693-57.753 96.256-115.097 97.587-117.452l4.813-8.704-3.891-9.114zM773.223 627.61c-34.406 30.924-71.475 55.603-110.182 73.216-48.128 21.81-99.02 32.87-151.45 32.87-53.145 0-104.55-11.06-152.78-32.87-38.81-17.613-75.674-42.19-109.67-73.114-44.954-40.858-73.012-82.33-83.764-99.635 8.909-19.456 33.485-67.891 76.902-115.712 32.359-35.635 68.813-63.898 108.237-84.173 49.05-25.19 103.22-37.888 161.075-37.888 56.218 0 109.466 12.8 158.31 37.888 39.322 20.275 75.982 48.64 109.057 84.378 44.032 47.616 69.837 95.948 79.462 115.61-11.366 17.51-40.038 58.674-85.197 99.43z" fill="#8a8a8a" p-id="19714" data-spm-anchor-id="a313x.search_index.0.i44.5b243a81J42vG4" class="selected"></path><path d="M511.59 349.491c-83.558 0-151.552 67.994-151.552 151.552s67.994 151.552 151.552 151.552 151.552-67.993 151.552-151.552S595.15 349.491 511.59 349.491z m0 262.144c-61.03 0-110.592-49.664-110.592-110.592 0-61.03 49.664-110.592 110.592-110.592 61.03 0 110.592 49.664 110.592 110.592 0 61.03-49.561 110.592-110.592 110.592z" fill="#01b9d1" p-id="19715" data-spm-anchor-id="a313x.search_index.0.i42.5b243a81J42vG4" class=""></path></svg> </el-button>
                    </template>
                  </el-table-column>
                  <template v-slot:empty>
                    <el-empty image-size="80"></el-empty>
                  </template>
                </el-table>
                <div class="block">
                  <!-- 页号 -->
                  <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                    <el-pagination
                        v-model:current-page="pageIndex"
                        v-model:page-size="pageSize"
                        :page-sizes="[5,10,15, 20]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalPage"
                        @size-change="sizeChangeHandle"
                        @current-change="CurrentChangeHandle"
                        style="margin-top: 30px"/>
                  </el-config-provider>
                </div>
              </div>
            </el-tab-pane>
            <!--2.满减劵表單-->
            <el-tab-pane label="满减劵" name="2">
              <div class="table-container">
                <!-- 清空选项 -->
                <el-button type="text" @click="toggleSelection()" style="margin-top: 10px">
                  清空选项
                </el-button>
                <!-- 数据表单 -->
                <el-table :data="fullDiscountList"
                          style="width: 100%;margin-top: 10px"
                          ref="multipleTable"
                          @selection-change="handleSelectionChange"
                          @header-contextmenu="cellClick">
                  <el-table-column type="selection" align="center" class="tui-checkbox "/>
                  <el-table-column fixed prop="couponsId" align="center" width="50px"/>
                  <el-table-column label="代金券名称" prop="couponsName" align="center" width="150px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.couponsName" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.couponsName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="是否启用" prop="stateValue" align="center" width="150px">
                    <template #default="scope">
                      <el-switch
                          v-model="scope.row.openState"
                          size="large"
                          inactive-color="#F56C6C"
                          inline-prompt
                          :disabled="scope.row.editState"
                          active-text="启用"
                          inactive-text="禁用"
                          @change="handleStatusChange(scope.$index, scope.row)">
                      </el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="广告主" prop="userName" align="center" width="180px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.userName" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.userName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="代替金额" prop="value" align="center" width="160px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.value" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.value}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="最低消费金额" prop="minimumAmount" align="center" width="160px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.minimumAmount" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.minimumAmount}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="有效日期" prop="value" align="center" width="420px">
                    <template #default="scope">
                      <div class="block" v-show="scope.row.iseditor">
                        <el-date-picker
                            v-model="value1"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                      </div>
                      <span v-show="!scope.row.iseditor">{{scope.row.startDate}}  至 {{scope.row.endDate}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="代金券描述" prop="description" align="center" width="180">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.description" v-show="scope.row.iseditor" />
                      <el-popover
                          placement="top-start"
                          title="代金券描述"
                          trigger="hover"
                          :content="scope.row.description"
                      >
                        <template #reference>
                          <span v-show="!scope.row.iseditor">{{ scope.row.description.slice(0, 10) + '...' }}</span>
                        </template>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column label="使用条件" prop="condition" align="center" width="180px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.condition" v-show="scope.row.iseditor" />
                      <el-popover
                          placement="top-start"
                          title="使用条件"
                          width="200"
                          trigger="hover"
                          :content="scope.row.condition"
                      >
                        <template #reference >
                          <span v-show="!scope.row.iseditor">{{ scope.row.condition.slice(0, 10) + '...' }}</span>
                        </template>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" align="center" width="160px">
                    <template #default="scope">

                      <!--編輯徽章按鈕-->
                      <svg version="1.1" class="table-row__edit" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                           viewBox="0 0 512.001 512.001" style="margin-top: 5px"
                           xml:space="preserve" data-toggle="tooltip" data-placement="bottom" title="Edit"
                           v-if="scope.row.showEditor" @click="edit(scope.row)"><g>	<g>
                    <path d="M496.063,62.299l-46.396-46.4c-21.2-21.199-55.69-21.198-76.888,0l-18.16,18.161l123.284,123.294l18.16-18.161    C517.311,117.944,517.314,83.55,496.063,62.299z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>
		<path d="M22.012,376.747L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    l117.512-21.763L22.012,376.747z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>		<polygon points="333.407,55.274 38.198,350.506 161.482,473.799 456.691,178.568   " style="fill: rgb(1, 185, 209);"></polygon>	</g></g><g></g><g></g><g></g>
                        <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
                      <!--保存徽章按鈕-->
                      <svg t="1707127122109" class="table-row__edit" viewBox="0 0 1024 1024" version="1.1"
                           xmlns="http://www.w3.org/2000/svg" p-id="6090"
                           v-if="scope.row.isEditor" @click="saves(scope.row)">
                        <path d="M896 0l-896 0 0 1024 1024 0 0-896-128-128zM512 128l128 0 0 256-128 0 0-256zM896 896l-768 0 0-768 64 0 0 320 576 0 0-320 74.97728 0 53.02272 53.02272 0 714.97728z" fill="#01b9d1" p-id="6091"></path></svg>
                      <!--刪除徽章按鈕-->
                      <el-popconfirm
                          confirm-button-text="确定"
                          cancel-button-text="取消"
                          icon-color="#F56C6C"
                          title="确定要删除该优惠券吗?"
                          @confirm="deleteUser"
                      >
                        <template #reference>
                          <el-button type="text" @click="getDelData(scope.row)" v-if="!scope.row.isAdd">
                            <svg t="1708690915206" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                 p-id="6707" data-spm-anchor-id="a313x.search_index.0.i19.5b243a81J42vG4" width="20" height="20"><path d="M390.144 128h213.333333a21.333333 21.333333 0 1 0 0-42.666667h-213.333333a21.333333 21.333333 0 0 0 0 42.666667zM64 240.469333h871.466667a21.333333 21.333333 0 1 0 0-42.666666H64a21.333333 21.333333 0 0 0 0 42.666666z" fill="#707070" p-id="6708" data-spm-anchor-id="a313x.search_index.0.i20.5b243a81J42vG4" class="selected"></path><path d="M711.082667 964.693333H286.762667a106.666667 106.666667 0 0 1-106.666667-106.666666V219.136a21.333333 21.333333 0 0 1 21.333333-21.333333h594.986667a21.333333 21.333333 0 0 1 21.333333 21.333333V858.026667a106.666667 106.666667 0 0 1-106.666666 106.666666zM222.762667 240.469333V858.026667a64 64 0 0 0 64 64h424.32a64 64 0 0 0 64-64V240.469333H222.762667z" fill="#707070" p-id="6709" data-spm-anchor-id="a313x.search_index.0.i18.5b243a81J42vG4" class="selected"></path><path d="M336.64 395.264v344.533333a21.333333 21.333333 0 1 0 42.666667 0V395.264a21.333333 21.333333 0 0 0-42.666667 0zM620.202667 395.264v344.533333a21.333333 21.333333 0 1 0 42.666666 0V395.264a21.333333 21.333333 0 1 0-42.666666 0zM478.378667 395.264v344.533333a21.333333 21.333333 0 1 0 42.666666 0V395.264a21.333333 21.333333 0 1 0-42.666666 0z" fill="#01b9d1" p-id="6710" data-spm-anchor-id="a313x.search_index.0.i15.5b243a81J42vG4" class=""></path></svg>  </el-button>
                        </template>
                      </el-popconfirm>
                      <!--查看詳情按鈕-->
                      <el-button type="text" @click="checkData(scope.$index, scope.row)" :class="['custom-button']">
                        <svg t="1708696256461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             p-id="19713" data-spm-anchor-id="a313x.search_index.0.i43.5b243a81J42vG4" width="25" height="25"><path d="M900.3 521.728c-1.126-2.765-28.978-69.018-90.418-135.885-36.25-39.424-76.8-70.963-120.525-93.593-54.887-28.468-114.79-42.906-177.869-42.906-64.614 0-125.44 14.438-180.531 42.906-43.93 22.63-84.378 54.17-120.115 93.798-60.519 66.97-86.528 133.427-87.552 136.192l-3.38 8.806 4.506 8.295c1.331 2.457 32.87 59.801 96.051 117.657 37.171 34.1 77.824 61.236 120.627 80.692 53.76 24.473 111.104 36.966 170.496 36.966 58.573 0 115.508-12.39 169.268-36.966 42.7-19.456 83.456-46.695 120.934-80.692 63.693-57.753 96.256-115.097 97.587-117.452l4.813-8.704-3.891-9.114zM773.223 627.61c-34.406 30.924-71.475 55.603-110.182 73.216-48.128 21.81-99.02 32.87-151.45 32.87-53.145 0-104.55-11.06-152.78-32.87-38.81-17.613-75.674-42.19-109.67-73.114-44.954-40.858-73.012-82.33-83.764-99.635 8.909-19.456 33.485-67.891 76.902-115.712 32.359-35.635 68.813-63.898 108.237-84.173 49.05-25.19 103.22-37.888 161.075-37.888 56.218 0 109.466 12.8 158.31 37.888 39.322 20.275 75.982 48.64 109.057 84.378 44.032 47.616 69.837 95.948 79.462 115.61-11.366 17.51-40.038 58.674-85.197 99.43z" fill="#8a8a8a" p-id="19714" data-spm-anchor-id="a313x.search_index.0.i44.5b243a81J42vG4" class="selected"></path><path d="M511.59 349.491c-83.558 0-151.552 67.994-151.552 151.552s67.994 151.552 151.552 151.552 151.552-67.993 151.552-151.552S595.15 349.491 511.59 349.491z m0 262.144c-61.03 0-110.592-49.664-110.592-110.592 0-61.03 49.664-110.592 110.592-110.592 61.03 0 110.592 49.664 110.592 110.592 0 61.03-49.561 110.592-110.592 110.592z" fill="#01b9d1" p-id="19715" data-spm-anchor-id="a313x.search_index.0.i42.5b243a81J42vG4" class=""></path></svg> </el-button>
                    </template>
                  </el-table-column>
                  <template v-slot:empty>
                    <el-empty image-size="80"></el-empty>
                  </template>
                </el-table>
                <div class="block">
                  <!-- 页号 -->
                  <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                    <el-pagination
                        v-model:current-page="pageIndex1"
                        v-model:page-size="pageSize1"
                        :page-sizes="[5,10,15, 20]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalPage1"
                        @size-change="sizeChangeHandle1"
                        @current-change="CurrentChangeHandle1"
                        style="margin-top: 30px"/>
                  </el-config-provider>
                </div>
              </div>
            </el-tab-pane>
            <!--3.折扣劵表單-->
            <el-tab-pane label="折扣劵" name="3">
              <div class="table-container">
                <!-- 清空选项 -->
                <el-button type="text" @click="toggleSelection()" style="margin-top: 10px">
                  清空选项
                </el-button>
                <!-- 数据表单 -->
                <el-table :data="discountList"
                          style="width: 100%;margin-top: 10px"
                          ref="multipleTable"
                          @selection-change="handleSelectionChange"
                          @header-contextmenu="cellClick">
                  <el-table-column type="selection" align="center" class="tui-checkbox "/>
                  <el-table-column fixed prop="couponsId" align="center" width="50px"/>
                  <el-table-column label="代金券名称" prop="couponsName" align="center" width="150px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.couponsName" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.couponsName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="是否启用" prop="stateValue" align="center" width="150px">
                    <template #default="scope">
                      <el-switch
                          v-model="scope.row.openState"
                          size="large"
                          inactive-color="#F56C6C"
                          inline-prompt
                          :disabled="scope.row.editState"
                          active-text="启用"
                          inactive-text="禁用"
                          @change="handleStatusChange(scope.$index, scope.row)">
                      </el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="广告主" prop="userName" align="center" width="180px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.userName" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.userName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="折扣比例" prop="value" align="center" width="160px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.value" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.value}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="有效日期" prop="value" align="center" width="420px">
                    <template #default="scope">
                      <div class="block" v-show="scope.row.iseditor">
                        <el-date-picker
                            v-model="value1"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                      </div>
                      <span v-show="!scope.row.iseditor">{{scope.row.startDate}}  至 {{scope.row.endDate}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="代金券描述" prop="description" align="center" width="180">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.description" v-show="scope.row.iseditor" />
                      <el-popover
                          placement="top-start"
                          title="代金券描述"
                          trigger="hover"
                          :content="scope.row.description"
                      >
                        <template #reference>
                          <span v-show="!scope.row.iseditor">{{ scope.row.description.slice(0, 10) + '...' }}</span>
                        </template>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column label="使用条件" prop="condition" align="center" width="180px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.condition" v-show="scope.row.iseditor" />
                      <el-popover
                          placement="top-start"
                          title="使用条件"
                          width="200"
                          trigger="hover"
                          :content="scope.row.condition"
                      >
                        <template #reference >
                          <span v-show="!scope.row.iseditor">{{ scope.row.condition.slice(0, 10) + '...' }}</span>
                        </template>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" align="center" width="160px">
                    <template #default="scope">

                      <!--編輯徽章按鈕-->
                      <svg version="1.1" class="table-row__edit" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                           viewBox="0 0 512.001 512.001" style="margin-top: 5px"
                           xml:space="preserve" data-toggle="tooltip" data-placement="bottom" title="Edit"
                           v-if="scope.row.showEditor" @click="edit(scope.row)"><g>	<g>
                    <path d="M496.063,62.299l-46.396-46.4c-21.2-21.199-55.69-21.198-76.888,0l-18.16,18.161l123.284,123.294l18.16-18.161    C517.311,117.944,517.314,83.55,496.063,62.299z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>
		<path d="M22.012,376.747L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    l117.512-21.763L22.012,376.747z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>		<polygon points="333.407,55.274 38.198,350.506 161.482,473.799 456.691,178.568   " style="fill: rgb(1, 185, 209);"></polygon>	</g></g><g></g><g></g><g></g>
                        <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
                      <!--保存徽章按鈕-->
                      <svg t="1707127122109" class="table-row__edit" viewBox="0 0 1024 1024" version="1.1"
                           xmlns="http://www.w3.org/2000/svg" p-id="6090"
                           v-if="scope.row.isEditor" @click="saves(scope.row)">
                        <path d="M896 0l-896 0 0 1024 1024 0 0-896-128-128zM512 128l128 0 0 256-128 0 0-256zM896 896l-768 0 0-768 64 0 0 320 576 0 0-320 74.97728 0 53.02272 53.02272 0 714.97728z" fill="#01b9d1" p-id="6091"></path></svg>
                      <!--刪除徽章按鈕-->
                      <el-popconfirm
                          confirm-button-text="确定"
                          cancel-button-text="取消"
                          icon-color="#F56C6C"
                          title="确定要删除该优惠券吗?"
                          @confirm="deleteUser"
                      >
                        <template #reference>
                          <el-button type="text" @click="getDelData(scope.row)" v-if="!scope.row.isAdd">
                            <svg t="1708690915206" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                 p-id="6707" data-spm-anchor-id="a313x.search_index.0.i19.5b243a81J42vG4" width="20" height="20"><path d="M390.144 128h213.333333a21.333333 21.333333 0 1 0 0-42.666667h-213.333333a21.333333 21.333333 0 0 0 0 42.666667zM64 240.469333h871.466667a21.333333 21.333333 0 1 0 0-42.666666H64a21.333333 21.333333 0 0 0 0 42.666666z" fill="#707070" p-id="6708" data-spm-anchor-id="a313x.search_index.0.i20.5b243a81J42vG4" class="selected"></path><path d="M711.082667 964.693333H286.762667a106.666667 106.666667 0 0 1-106.666667-106.666666V219.136a21.333333 21.333333 0 0 1 21.333333-21.333333h594.986667a21.333333 21.333333 0 0 1 21.333333 21.333333V858.026667a106.666667 106.666667 0 0 1-106.666666 106.666666zM222.762667 240.469333V858.026667a64 64 0 0 0 64 64h424.32a64 64 0 0 0 64-64V240.469333H222.762667z" fill="#707070" p-id="6709" data-spm-anchor-id="a313x.search_index.0.i18.5b243a81J42vG4" class="selected"></path><path d="M336.64 395.264v344.533333a21.333333 21.333333 0 1 0 42.666667 0V395.264a21.333333 21.333333 0 0 0-42.666667 0zM620.202667 395.264v344.533333a21.333333 21.333333 0 1 0 42.666666 0V395.264a21.333333 21.333333 0 1 0-42.666666 0zM478.378667 395.264v344.533333a21.333333 21.333333 0 1 0 42.666666 0V395.264a21.333333 21.333333 0 1 0-42.666666 0z" fill="#01b9d1" p-id="6710" data-spm-anchor-id="a313x.search_index.0.i15.5b243a81J42vG4" class=""></path></svg>  </el-button>
                        </template>
                      </el-popconfirm>
                      <!--查看詳情按鈕-->
                      <!--查看詳情按鈕-->
                      <el-button type="text" @click="checkData(scope.$index, scope.row)" :class="['custom-button']">
                        <svg t="1708696256461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             p-id="19713" data-spm-anchor-id="a313x.search_index.0.i43.5b243a81J42vG4" width="25" height="25"><path d="M900.3 521.728c-1.126-2.765-28.978-69.018-90.418-135.885-36.25-39.424-76.8-70.963-120.525-93.593-54.887-28.468-114.79-42.906-177.869-42.906-64.614 0-125.44 14.438-180.531 42.906-43.93 22.63-84.378 54.17-120.115 93.798-60.519 66.97-86.528 133.427-87.552 136.192l-3.38 8.806 4.506 8.295c1.331 2.457 32.87 59.801 96.051 117.657 37.171 34.1 77.824 61.236 120.627 80.692 53.76 24.473 111.104 36.966 170.496 36.966 58.573 0 115.508-12.39 169.268-36.966 42.7-19.456 83.456-46.695 120.934-80.692 63.693-57.753 96.256-115.097 97.587-117.452l4.813-8.704-3.891-9.114zM773.223 627.61c-34.406 30.924-71.475 55.603-110.182 73.216-48.128 21.81-99.02 32.87-151.45 32.87-53.145 0-104.55-11.06-152.78-32.87-38.81-17.613-75.674-42.19-109.67-73.114-44.954-40.858-73.012-82.33-83.764-99.635 8.909-19.456 33.485-67.891 76.902-115.712 32.359-35.635 68.813-63.898 108.237-84.173 49.05-25.19 103.22-37.888 161.075-37.888 56.218 0 109.466 12.8 158.31 37.888 39.322 20.275 75.982 48.64 109.057 84.378 44.032 47.616 69.837 95.948 79.462 115.61-11.366 17.51-40.038 58.674-85.197 99.43z" fill="#8a8a8a" p-id="19714" data-spm-anchor-id="a313x.search_index.0.i44.5b243a81J42vG4" class="selected"></path><path d="M511.59 349.491c-83.558 0-151.552 67.994-151.552 151.552s67.994 151.552 151.552 151.552 151.552-67.993 151.552-151.552S595.15 349.491 511.59 349.491z m0 262.144c-61.03 0-110.592-49.664-110.592-110.592 0-61.03 49.664-110.592 110.592-110.592 61.03 0 110.592 49.664 110.592 110.592 0 61.03-49.561 110.592-110.592 110.592z" fill="#01b9d1" p-id="19715" data-spm-anchor-id="a313x.search_index.0.i42.5b243a81J42vG4" class=""></path></svg> </el-button>
                    </template>
                  </el-table-column>
                  <template v-slot:empty>
                    <el-empty image-size="80"></el-empty>
                  </template>
                </el-table>
                <div class="block">
                  <!-- 页号 -->
                  <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                    <el-pagination
                        v-model:current-page="pageIndex2"
                        v-model:page-size="pageSize2"
                        :page-sizes="[5,10,15, 20]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalPage2"
                        @size-change="sizeChangeHandle2"
                        @current-change="CurrentChangeHandle2"
                        style="margin-top: 30px"/>
                  </el-config-provider>
                </div>
              </div>
            </el-tab-pane>
            <!--4.特殊徽章表單-->
            <el-tab-pane label="兑换券" name="4">
              <div class="table-container">
                <!-- 清空选项 -->
                <el-button type="text" @click="toggleSelection()" style="margin-top: 10px">
                  清空选项
                </el-button>
                <!-- 数据表单 -->
                <el-table :data="exchangeList"
                          style="width: 100%;margin-top: 10px"
                          ref="multipleTable"
                          @selection-change="handleSelectionChange"
                          @header-contextmenu="cellClick">
                  <el-table-column type="selection" align="center" class="tui-checkbox "/>
                  <el-table-column fixed prop="couponsId" align="center" width="50px"/>
                  <el-table-column label="代金券名称" prop="couponsName" align="center" width="150px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.couponsName" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.couponsName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="是否启用" prop="stateValue" align="center" width="150px">
                    <template #default="scope">
                      <el-switch
                          v-model="scope.row.openState"
                          size="large"
                          inactive-color="#F56C6C"
                          inline-prompt
                          :disabled="scope.row.editState"
                          active-text="启用"
                          inactive-text="禁用"
                          @change="handleStatusChange(scope.$index, scope.row)">
                      </el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="广告主" prop="userName" align="center" width="180px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.userName" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.userName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="兑换商品名称" prop="productName" align="center" width="150px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.productName" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.productName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="兑换商品图片" align="center" width="120px">
                    <template #default="scope">
                      <el-text class="mx-1" v-if="!scope.row.productImageUrl&&!scope.row.iseditor"><el-tag type="danger">未上传</el-tag></el-text>
                      <el-button type="text" v-if="scope.row.productImageUrl&&!scope.row.iseditor" @click="getProducttPic(scope.row)" :class="['custom-button']">查看图片</el-button>
                      <el-upload
                          v-model="scope.row.productImageUrl"
                          v-show="scope.row.iseditor"
                          class="avatar-uploader"
                          :action="'/api/couponsManage/updateProductPic'"
                          :show-file-list="false"
                          :on-success="handleCommodityPicSuccess"
                          :before-upload="beforeCommodityPicUpload"
                          :data="{couponsId: scope.row.couponsId}">
                        <el-button type="text">上传图片</el-button>
                      </el-upload>
                    </template>
                  </el-table-column>
                  <el-table-column label="有效日期" prop="value" align="center" width="420px">
                    <template #default="scope">
                      <div class="block" v-show="scope.row.iseditor">
                        <el-date-picker
                            v-model="value1"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                      </div>
                      <span v-show="!scope.row.iseditor">{{scope.row.startDate}}  至 {{scope.row.endDate}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="代金券描述" prop="description" align="center" width="180">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.description" v-show="scope.row.iseditor" />
                      <el-popover
                          placement="top-start"
                          title="代金券描述"
                          trigger="hover"
                          :content="scope.row.description"
                      >
                        <template #reference>
                          <span v-show="!scope.row.iseditor">{{ scope.row.description.slice(0, 10) + '...' }}</span>
                        </template>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column label="使用条件" prop="condition" align="center" width="180px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.condition" v-show="scope.row.iseditor" />
                      <el-popover
                          placement="top-start"
                          title="使用条件"
                          width="200"
                          trigger="hover"
                          :content="scope.row.condition"
                      >
                        <template #reference >
                          <span v-show="!scope.row.iseditor">{{ scope.row.condition.slice(0, 10) + '...' }}</span>
                        </template>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" align="center" width="160px">
                    <template #default="scope">

                      <!--編輯徽章按鈕-->
                      <svg version="1.1" class="table-row__edit" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                           viewBox="0 0 512.001 512.001" style="margin-top: 5px"
                           xml:space="preserve" data-toggle="tooltip" data-placement="bottom" title="Edit"
                           v-if="scope.row.showEditor" @click="edit(scope.row)"><g>	<g>
                    <path d="M496.063,62.299l-46.396-46.4c-21.2-21.199-55.69-21.198-76.888,0l-18.16,18.161l123.284,123.294l18.16-18.161    C517.311,117.944,517.314,83.55,496.063,62.299z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>
		<path d="M22.012,376.747L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    l117.512-21.763L22.012,376.747z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>		<polygon points="333.407,55.274 38.198,350.506 161.482,473.799 456.691,178.568   " style="fill: rgb(1, 185, 209);"></polygon>	</g></g><g></g><g></g><g></g>
                        <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
                      <!--保存徽章按鈕-->
                      <svg t="1707127122109" class="table-row__edit" viewBox="0 0 1024 1024" version="1.1"
                           xmlns="http://www.w3.org/2000/svg" p-id="6090"
                           v-if="scope.row.isEditor" @click="saves(scope.row)">
                        <path d="M896 0l-896 0 0 1024 1024 0 0-896-128-128zM512 128l128 0 0 256-128 0 0-256zM896 896l-768 0 0-768 64 0 0 320 576 0 0-320 74.97728 0 53.02272 53.02272 0 714.97728z" fill="#01b9d1" p-id="6091"></path></svg>
                      <!--刪除徽章按鈕-->
                      <el-popconfirm
                          confirm-button-text="确定"
                          cancel-button-text="取消"
                          icon-color="#F56C6C"
                          title="确定要删除该优惠券吗?"
                          @confirm="deleteUser"
                      >
                        <template #reference>
                          <el-button type="text" @click="getDelData(scope.row)" v-if="!scope.row.isAdd">
                            <svg t="1708690915206" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                 p-id="6707" data-spm-anchor-id="a313x.search_index.0.i19.5b243a81J42vG4" width="20" height="20"><path d="M390.144 128h213.333333a21.333333 21.333333 0 1 0 0-42.666667h-213.333333a21.333333 21.333333 0 0 0 0 42.666667zM64 240.469333h871.466667a21.333333 21.333333 0 1 0 0-42.666666H64a21.333333 21.333333 0 0 0 0 42.666666z" fill="#707070" p-id="6708" data-spm-anchor-id="a313x.search_index.0.i20.5b243a81J42vG4" class="selected"></path><path d="M711.082667 964.693333H286.762667a106.666667 106.666667 0 0 1-106.666667-106.666666V219.136a21.333333 21.333333 0 0 1 21.333333-21.333333h594.986667a21.333333 21.333333 0 0 1 21.333333 21.333333V858.026667a106.666667 106.666667 0 0 1-106.666666 106.666666zM222.762667 240.469333V858.026667a64 64 0 0 0 64 64h424.32a64 64 0 0 0 64-64V240.469333H222.762667z" fill="#707070" p-id="6709" data-spm-anchor-id="a313x.search_index.0.i18.5b243a81J42vG4" class="selected"></path><path d="M336.64 395.264v344.533333a21.333333 21.333333 0 1 0 42.666667 0V395.264a21.333333 21.333333 0 0 0-42.666667 0zM620.202667 395.264v344.533333a21.333333 21.333333 0 1 0 42.666666 0V395.264a21.333333 21.333333 0 1 0-42.666666 0zM478.378667 395.264v344.533333a21.333333 21.333333 0 1 0 42.666666 0V395.264a21.333333 21.333333 0 1 0-42.666666 0z" fill="#01b9d1" p-id="6710" data-spm-anchor-id="a313x.search_index.0.i15.5b243a81J42vG4" class=""></path></svg>  </el-button>
                        </template>
                      </el-popconfirm>
                      <!--查看詳情按鈕-->
                      <el-button type="text" @click="checkData(scope.$index, scope.row)" :class="['custom-button']">
                        <svg t="1708696256461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             p-id="19713" data-spm-anchor-id="a313x.search_index.0.i43.5b243a81J42vG4" width="25" height="25"><path d="M900.3 521.728c-1.126-2.765-28.978-69.018-90.418-135.885-36.25-39.424-76.8-70.963-120.525-93.593-54.887-28.468-114.79-42.906-177.869-42.906-64.614 0-125.44 14.438-180.531 42.906-43.93 22.63-84.378 54.17-120.115 93.798-60.519 66.97-86.528 133.427-87.552 136.192l-3.38 8.806 4.506 8.295c1.331 2.457 32.87 59.801 96.051 117.657 37.171 34.1 77.824 61.236 120.627 80.692 53.76 24.473 111.104 36.966 170.496 36.966 58.573 0 115.508-12.39 169.268-36.966 42.7-19.456 83.456-46.695 120.934-80.692 63.693-57.753 96.256-115.097 97.587-117.452l4.813-8.704-3.891-9.114zM773.223 627.61c-34.406 30.924-71.475 55.603-110.182 73.216-48.128 21.81-99.02 32.87-151.45 32.87-53.145 0-104.55-11.06-152.78-32.87-38.81-17.613-75.674-42.19-109.67-73.114-44.954-40.858-73.012-82.33-83.764-99.635 8.909-19.456 33.485-67.891 76.902-115.712 32.359-35.635 68.813-63.898 108.237-84.173 49.05-25.19 103.22-37.888 161.075-37.888 56.218 0 109.466 12.8 158.31 37.888 39.322 20.275 75.982 48.64 109.057 84.378 44.032 47.616 69.837 95.948 79.462 115.61-11.366 17.51-40.038 58.674-85.197 99.43z" fill="#8a8a8a" p-id="19714" data-spm-anchor-id="a313x.search_index.0.i44.5b243a81J42vG4" class="selected"></path><path d="M511.59 349.491c-83.558 0-151.552 67.994-151.552 151.552s67.994 151.552 151.552 151.552 151.552-67.993 151.552-151.552S595.15 349.491 511.59 349.491z m0 262.144c-61.03 0-110.592-49.664-110.592-110.592 0-61.03 49.664-110.592 110.592-110.592 61.03 0 110.592 49.664 110.592 110.592 0 61.03-49.561 110.592-110.592 110.592z" fill="#01b9d1" p-id="19715" data-spm-anchor-id="a313x.search_index.0.i42.5b243a81J42vG4" class=""></path></svg> </el-button>
                    </template>
                  </el-table-column>
                  <template v-slot:empty>
                    <el-empty image-size="80"></el-empty>
                  </template>
                </el-table>
                <div class="block">
                  <!-- 页号 -->
                  <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                    <el-pagination
                        v-model:current-page="pageIndex3"
                        v-model:page-size="pageSize3"
                        :page-sizes="[5,10,15, 20]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalPage3"
                        @size-change="sizeChangeHandle3"
                        @current-change="CurrentChangeHandle3"
                        style="margin-top: 30px"/>
                  </el-config-provider>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </el-card>

  <!-- 确认删除弹窗 -->
  <div>
    <el-dialog
        v-model="delDialogVisible"
        title="提示"
        center
        width="20%"
        :custom-class="'rounded-dialog'"
    >

      <el-text class="mx-2" style="margin-left: 10px">此操作将永久删除该优惠券, 是否继续?</el-text>
      <template #footer>
                <span class="dialog-footer" >
                  <el-button type="primary"  style="margin-bottom: 10px" @click="deleteSelection">确定</el-button>
                  <el-button type="primary" plain style="margin-bottom: 10px" @click="this.delDialogVisible=false">取消</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
  <!-- 產品顯示 -->
  <div>
    <el-dialog
        v-model="productVisible"
        center
        width="20%"
    >
      <el-main style="display: flex;justify-content: center;align-items: center">
        <div class="block">
          <el-image v-if="productRouter" :src="productRouter"></el-image>
        </div>
      </el-main>
    </el-dialog>
  </div>

</template>

<script>
import axios from 'axios';
import {ElMessage} from "element-plus";
export default{
  name: "CouponList",
  data() {
    return {
      // 代金券列表的数据集合
      voucherList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      begin: 0,
      end: this.pageSize - 1,
      // 满减劵的数据集合
      fullDiscountList:[],
      pageIndex1: 1,
      pageSize1:5,
      totalPage1: 0,
      begin1: 0,
      end1: this.pageSize1 - 1,
      // 折扣劵的数据集合
      discountList:[],
      pageIndex2: 1,
      pageSize2:5,
      totalPage2: 0,
      begin2: 0,
      end2: this.pageSize2 - 1,
      // 兌換劵的数据集合
      exchangeList:[],
      pageIndex3: 1,
      pageSize3:5,
      totalPage3: 0,
      begin3: 0,
      end3: this.pageSize3 - 1,

      multipleSelection: [],
      dataForm: {
        badgeName:"",description:"",type:0,
        taskId:0,attributeId:0,attributeValue:0,
        badgeNumber:0,requirement:""
      },
      delData:{
        couponsId:0
      },
      delDialogVisible:false,  //批量删除用户彈窗
      // 搜索框内容
      inputForm:{
        couponsName: null,
        companyName: null
      },
      type:1,
      //分页方法
      activeName: "1",// 当前选中的tab
      activeTab: '', // 存储当前激活的标签页的名称
      dynamicTabs: [], // 存储从后端获取的标签页信息
      currentPark: [],

      productVisible:false,
      productRouter:"",

      //屬性数据
      attributeList:[],
      //省份下拉框模型对象
      attributeName:'',
      //日期選擇器
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10),
        new Date(2000, 10, 11, 10, 10)],
      value2: '',

      value: false,
      disabledValue:false
    }
  },
  watch: {
    // 监听type变化
    type(newType, oldType) {
      if (newType !== oldType) {
        this.resetInputForm();
      }
    },
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      if(tab.props.name === "1"){
        this.activeTab = "1";
        this.type=1;
        this.getVoucherList();
      }else if(tab.props.name === "2"){
        this.activeTab = "2";
        this.type=2;
        this.getFullDiscountList();
      }else if(tab.props.name === "3"){
        this.activeTab = "3";
        this.type=3;
        this.getDiscountList();
      }else if(tab.props.name === "4"){
        this.activeTab = "4";
        this.type=4;
        this.getExchangeList();
      }
    },
    //0.分页方法
    getPageInfo(pageSize, pageNum) {
      return {
        "pageSize": pageSize,
        "pageNum": pageNum
      }
    },

    /*優惠券顯示*/
    // 1.改变数组大小
    sizeChangeHandle(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;

      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getVoucherList();
      }
    },
    // 2.改变当前页号
    CurrentChangeHandle(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.voucherList = [];
      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getVoucherList();
      }
    },
    // 3.表格數據顯示
    async getVoucherList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize, this.pageIndex);
        console.log(pageInfo);

        const res = await axios.post('/couponsManage/getVoucherList', pageInfo);

        console.log("优惠券數據：",res);

        if (res.status === 200) {
          this.voucherList = res.data.data.list.map(item => {
            let showEditor=true;
            let iseditor=false;
            return {
              ...item,
              showEditor,
              iseditor
            };
          });
          this.totalPage = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取优惠券数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取优惠券数据失败');
      }
    },

    /*满减劵顯示*/
    // 1.改变数组大小
    sizeChangeHandle1(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize1 = val;

      if(this.inputForm!==null){
        console.log("你好");
        this.searchDataList();
      }
      else{
        console.log("空");
        this.getFullDiscountList();
      }
    },
    // 2.改变当前页号
    CurrentChangeHandle1(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex1 = val;
      this.achievementBadgeList = [];
      if(this.inputForm!==null){
        console.log("你好");
        this.searchDataList();
      }
      else{
        console.log("空");
        this.getFullDiscountList();
      }
    },
    // 3.表格數據顯示
    async getFullDiscountList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize1, this.pageIndex1);
        console.log(pageInfo);

        const res = await axios.post('/couponsManage/getFullDiscountCouponList', pageInfo);

        console.log(res);

        if (res.status === 200) {
          this.fullDiscountList = res.data.data.list.map(item => {
            let showEditor=true;
            let iseditor=false;
            return {
              ...item,
              showEditor,
              iseditor
            };
          });
          this.totalPage1 = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取优惠券数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取优惠券数据失败');
      }
    },

    /*折扣券顯示*/
    // 1.改变数组大小
    sizeChangeHandle2(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize2 = val;

      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getDiscountList();
      }
    },
    // 2.改变当前页号
    CurrentChangeHandle2(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex2 = val;
      this.specialBadgeList = [];
      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getDiscountList();
      }
    },
    // 3.表格數據顯示
    async getDiscountList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize2, this.pageIndex2);
        console.log(pageInfo);

        const res = await axios.post('/couponsManage/getDiscountCouponList', pageInfo);

        console.log(res);

        if (res.status === 200) {
          this.discountList = res.data.data.list.map(item => {
            let showEditor=true;
            let iseditor=false;
            return {
              ...item,
              showEditor,
              iseditor
            };
          });
          this.totalPage2 = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取优惠券数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取优惠券数据失败');
      }
    },

    /*兌換券顯示*/
    // 1.改变数组大小
    sizeChangeHandle3(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize3 = val;

      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getExchangeList();
      }
    },
    // 2.改变当前页号
    CurrentChangeHandle3(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex3 = val;
      this.specialBadgeList = [];
      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getExchangeList();
      }
    },
    // 3.表格數據顯示
    async getExchangeList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize3, this.pageIndex3);
        console.log(pageInfo);

        const res = await axios.post('/couponsManage/getExchangeCouponList', pageInfo);

        console.log(res);

        if (res.status === 200) {
          this.exchangeList = res.data.data.list.map(item => {
            let showEditor=true;
            let iseditor=false;
            return {
              ...item,
              showEditor,
              iseditor
            };
          });
          this.totalPage3 = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取优惠券数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取优惠券数据失败');
      }
    },

    resetInputForm() {
      this.inputForm = {
        badgeName: '',
        attributeName: '',

      };
      this.typeValue= '';
    },
    /*查詢數據*/
    //1.定義查詢徽章信息
    searchBadgeInfo(pageSize,pageNum,attributeName,badgeName,type,taskType){
      return {
        "pageSize": pageSize, "pageNum": pageNum,"attributeName": attributeName, "badgeName":badgeName,"type":type,"taskType":taskType
      };
    },
    //2.查询数据
    async searchDataList() {
      try {
        const attributeName = this.inputForm.attributeName;
        const badgeName = this.inputForm.badgeName;
        const type = this.type;
        const typeValue = this.typeValue;

        let searchData;  // 在此定义 searchData 变量，以便在后续使用

        console.log("查詢參數:",this.typeValue);
        //  console.log("查詢參數:attributeName:",attributeName,"badgeName:",badgeName,"type:",type,"typeValue:",this.typeValue);
        if (this.type === 1) {
          searchData = this.searchBadgeInfo(this.pageSize, this.pageIndex, attributeName, badgeName, type, typeValue);
        } else if (this.type === 2) {
          searchData = this.searchBadgeInfo(this.pageSize1, this.pageIndex1, attributeName, badgeName, type, typeValue);
        } else if (this.type === 3) {
          searchData = this.searchBadgeInfo(this.pageSize2, this.pageIndex2, attributeName, badgeName, type, typeValue);
        }
        console.log("查詢參數:",searchData);
        if (attributeName||badgeName||typeValue) {
          const res = await axios.post('/badgeManage/searchBadgeList', searchData);
          console.log("檢索返回值",res.status);
          //檢索成長徽章
          if(this.type === 1){
            if (res.status === 200) {
              this.growthBadgeList = res.data.data.list;
              this.totalPage = res.data.data.total;
            } else {
              console.error('Error fetching data:', res.statusText);
              ElMessage('获取徽章数据失败');
            }
          }
          if(this.type === 2){
            if (res.status === 200) {
              this.achievementBadgeList = res.data.data.list;
              this.totalPage1 = res.data.data.total;
            } else {
              console.error('Error fetching data:', res.statusText);
              ElMessage('获取徽章数据失败');
            }
          }
          if(this.type === 3){
            if (res.status === 200) {
              this.specialBadgeList = res.data.data.list;

              this.totalPage2 = res.data.data.total;
            } else {
              console.error('Error fetching data:', res.statusText);
              ElMessage('获取表单数据失败');
            }
          }
        } else {
          if(this.type === 1)  this.getGrowthBadgeList();
          if(this.type === 2)  this.getFullDiscountList();
          if(this.type === 3)  this.getSpecialBadgeList();
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('出错了');
        if(this.type === 1)  this.getGrowthBadgeList();
        if(this.type === 2)  this.getFullDiscountList();
        if(this.type === 3)  this.getSpecialBadgeList();
      }
    },

    /*新增優惠券*/
    addData(){
      this.$router.push({path:'/couponManagement/AddCoupon',query:{type:this.type}})
    },

    del(row){
      row.iseditor = false;
      row.isAdd = false;
      row.showEditor = true;

      if(this.type === 1)  this.getVoucherList();
      if(this.type === 2)  this.getFullDiscountList();
      if(this.type === 3)  this.getDiscountList();
      if(this.type === 4)  this.getExchangeList();
    },

    /* 删除優惠券*/
    //0.定義删除徽章信息
    delDelInfo(couponsId){
      return {
        "couponsId": couponsId
      };
    },
    //1.获取该行数据
    getDelData(item){
      this.delData = {
        couponsId: item.couponsId
      }
      console.log('Button clicked for row:',this.delData.couponsId,',優惠券類型为：',this.type);
    },
    //2.删除優惠券
    async deleteUser(){
      const delInfo = this.delDelInfo(this.delData.couponsId);
      try {
        const res = await axios.post('/couponsManage/deleteCoupon',delInfo);

        if (res.status === 200) {
          ElMessage({
            message: '删除优惠券成功',
            type: 'success',
          });
          if(this.type === 1)  this.getVoucherList();
          if(this.type === 2)  this.getFullDiscountList();
          if(this.type === 3)  this.getDiscountList();
          if(this.type === 4)  this.getExchangeList();
        }
        else{
          ElMessage({
            showClose: true,
            message: '删除优惠券失败',
            type: 'error',
          })
        }
      } catch (error) {
        ElMessage({
          showClose: true,
          message: '出错了',
          type: 'warning',
        })
      }
    },

    /*批量刪除*/
    //0.清空选项按钮
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //1.确认删除弹窗
    openWindow(){
      if(this.multipleSelection.length > 0 ){
        this.delDialogVisible = true;
      }else{
        ElMessage({
          showClose: true,
          message: '请先选择要删除的优惠券',
          type: 'warning',
        })
      }
    },
    //2.批量删除
    async deleteSelection(){
      try {
        const res = await axios.post('/couponsManage/batchDeleteCoupons',this.multipleSelection);

        if (res.status === 200) {
          ElMessage({
            message: '批量删除优惠券成功',
            type: 'success',
          });
          this.delDialogVisible=false;
          if(this.type === 1)  this.getVoucherList();
          if(this.type === 2)  this.getFullDiscountList();
          if(this.type === 3)  this.getDiscountList();
          if(this.type === 4)  this.getExchangeList();
        }
        else{
          console.error('Error fetching data:', res.statusText);
          ElMessage({
            showClose: true,
            message: '删除优惠券失败',
            type: 'error',
          });
          if(this.type === 1)  this.getVoucherList();
          if(this.type === 2)  this.getFullDiscountList();
          if(this.type === 3)  this.getDiscountList();
          if(this.type === 4)  this.getExchangeList();
        }
      } catch (error) {
        ElMessage({
          showClose: true,
          message: '出错了',
          type: 'warning',
        })
      }

    },
    //訂單詳情
    checkData(index, row){
      this.$router.push({path:'/couponManagement/CouponDetail',query:{couponsId:row.couponsId}})
    },

    /*訂單狀態修改*/
    handleStatusChange(index,row){
      this.updateStatus(row.couponsId,row.openState);
    },
    statusInfo(couponsId,openState){
      return {
        "couponsId":couponsId,"openState":openState
      };
    },
    updateStatus(ids, openState) {
      let statusInfo = this.statusInfo(ids, openState);
      console.log("修改狀態:",statusInfo);

      this.$confirm('是否要修改启用状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post('/couponsManage/updateState', statusInfo).then((response) => {
          if (response.status === 200) {
            if (this.type === 1) this.getVoucherList();
            if (this.type === 2) this.getFullDiscountList();
            if (this.type === 3) this.getDiscountList();
            if (this.type === 4) this.getExchangeList();

            this.$message({
              type: 'success',
              message: '修改成功!'
            });
          } else {
            this.$message({
              type: 'warning',
              message: '修改失败!'
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'success',
          message: '已取消操作!'
        });

        // 取消操作时依然刷新列表（似乎此处逻辑可以优化，因为不论用户是否取消，都会重新获取数据）
        if (this.type === 1) this.getVoucherList();
        if (this.type === 2) this.getFullDiscountList();
        if (this.type === 3) this.getDiscountList();
        if (this.type === 4) this.getExchangeList();
      });
    },


    /*顯示商品圖片*/
    async getProducttPic(item){
      this.couponsId=item.couponsId;
      this.productVisible = true;

      const res = await axios.post('/couponsManage/findProductPic/'+item.couponsId)
      console.log(res.data.data,'图片地址')

      if (res.data.data != null) {
        this.productRouter = res.data.data
      }else{
        ElMessage({
          message: '出错了',
        })
      }
    },
    //圖片上傳
    handleCommodityPicSuccess(res) {
      if (res && res.code === 200) {
        this.$message.success('上传成功');
      } else if (res && res.message) {
        this.$message.error(res.message);
      } else {
        this.$message.error('上传失败，未知错误');
      }
    },
    beforeCommodityPicUpload(file) {
      const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'; // 修改这一行
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPGorPNG) {
        this.$message.error('上传徽章图片只能是 JPG 或 PNG 格式!'); // 修改这一行
      }
      if (!isLt2M) {
        this.$message.error('上传徽章图片大小不能超过 2MB!');
      }
      return isJPGorPNG && isLt2M; // 修改这一行
    },
    /*編輯優惠券信息*/
    //1.編輯按鈕
    edit(row) {
      row.iseditor = true;
      row.isEditor = true;
      row.showEditor = false;

    },
    //2.定義優惠券信息
    editBadgeInfo(couponsId,badgeName,description,type,taskId,attributeId,attributeValue,badgeNumber,requirement){
      return {
        "couponsId":couponsId,"badgeName":badgeName, "description": description, "type": type,
        "taskId":taskId, "attributeId":attributeId, "attributeValue": attributeValue,
        "badgeNumber": badgeNumber, "requirement": requirement
      };
    },
    //3.保存修改
    async saves(row) {
      let badgeId = row.badgeId;
      let badgeName = row.badgeName;
      let description = row.description;
      let type= this.type;
      let taskId = row.taskId;
      let attributeId = row.attributeId;
      let attributeValue = row.attributeValue;
      let badgeNumber = row.badgeNumber;
      let requirement = row.requirement;

      const editInfo = this.editBadgeInfo(badgeId,badgeName,description,type,taskId,attributeId,attributeValue,badgeNumber,requirement);

      console.log("編輯參數:",editInfo);

      try {
        const res = await axios.post('/badgeManage/updateCoupon',editInfo);

        console.log('获取res数据:',res);
        if (res.data.code === 200) {
          ElMessage({
            message: '修改优惠券信息成功',
            type: 'success',
          });
          if(this.type === 1)  this.getGrowthBadgeList();
          if(this.type === 2)  this.getAchievementBadgeList();
          if(this.type === 3)  this.getSpecialBadgeList();
        }if (res.data.code === 400) {
          this.$message.error(res.data);
          if(this.type === 1)  this.getGrowthBadgeList();
          if(this.type === 2)  this.getAchievementBadgeList();
          if(this.type === 3)  this.getSpecialBadgeList();
        }
      } catch (error) {
        ElMessage({
          showClose: true,
          message: '出错了',
          type: 'warning',
        })
      }
      row.iseditor = false;
      row.isEditor = false;
      row.showEditor = true;

    },
    // Use the beforeCreate hook to initialize the 'end' property
    beforeCreate() {
      this.end = this.pageSize - 1;
      this.end1 = this.pageSize1 - 1;
      this.end2 = this.pageSize2 - 1;
      this.end3 = this.pageSize3 - 1;
    },
  },

  mounted() {
    this.getVoucherList();
  }
}
</script>

<style scoped lang="scss">
@import "@/theme/common.css";
@import "@/theme/commonTable.css";
//复选框样式
:deep .el-checkbox__inner{
  border-radius: 50%;
}
:deep .el-checkbox__inner::after {
  transform: translate(-50%, -50%) scale(1) !important;
  width: 4px;
  height: 4px;
  border-radius: 50% !important;
  background-color: var(--el-color-white);
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transition: transform 0.15s ease-in;
}

</style>